<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>AI+应用设计创新大赛</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--====== Favicon Icon ======-->
    <link rel="shortcut icon" href="/images/favicon.png" type="image/png">
    <!--====== Bootstrap CSS ======-->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!--====== default CSS ======-->
    <link rel="stylesheet" href="/css/default.css">
    <link rel="stylesheet" href="/font/bootstrap-icons.css">
    <!--====== Style CSS ======-->
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/css/spin.css">
    <style>
        label.error{
            color: red;
            width: auto;
        }
    </style>
</head>
<body>
    <div>
        <div th:insert="common/mainHeader :: main_header"></div>
        <div class="main_frame">
            <div class="main_left">
                <ul>
                    <li>
                        <a th:href="@{/main}">
                            账号信息
                        </a>
                    </li>
                    <li class="active">
                        <a th:href="@{/teamUI}">
                            团队信息
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/uis/updatePwdUI}">
                            修改密码
                        </a>
                    </li>
                </ul>
            </div>
            <div class="main_right">
                <div class="main_right_container">
                    <div class="main_right_title">
                        <p><i class="bi bi-house-fill" style="font-size: 0.9rem;"></i>团队信息</p>
                    </div>
                    <div class="right_table" th:if="${team} != null">
                        <form id="myForm">
                            <div class="table_form">
                                <label for="teamName">团队名称<span style="color:red;">*</span></label>
                                <input id="teamName" name="teamName" type="text" th:value="${team.teamName}">
                            </div>
                            <div class="table_form">
                                <label for="coach">是否需要辅导</label>
                                <input id="coach" name="coach" th:checked="${team.coach} == 1?:false" type="checkbox" value="1">
                            </div>
                            <div class="table_form">
                                <label for="plan">项目计划书<span style="color:red;">*</span></label>
                                <input type="file" name="plan" id="plan" >
                                <label for="plan">
                                    <i style="display:none;font-size: 36px" id="plan_video" class="bi bi-camera-reels"></i>
                                    <i style="display:none;font-size: 36px" id="plan_file" class="bi bi-file-earmark-word"></i>
                                </label>
                                <input type="hidden" name="planUrl" id="planUrl" th:value="${team.plan}">
                                <label for="plan" style="width:auto;margin-left:10px;color:#0067f4">在这里上传您的项目计划书(doc、docx、pdf格式)</label>
                            </div>
                            <div class="table_form">
                                <label for="content">项目介绍</label>
                                <input type="file" name="content" id="content">
                                <label for="content">
                                    <i style="display:none;font-size: 36px" id="content_video" class="bi bi-camera-reels"></i>
                                    <i style="display:none;font-size: 36px" id="content_file" class="bi bi-file-earmark-word"></i>
                                </label>
                                <input type="hidden" name="contentUrl" id="contentUrl" th:value="${team.video}">
                                <label for="content" style="width:auto;margin-left:10px;color:#0067f4">在这里上传您的项目介绍视频(30M以内，avi、mp4格式)</label>
                            </div>
                            <div class="table_form" style="margin-top:30px;">
                                <h5>团队成员</h5>
                            </div>
                            <div id="groups" th:if="${team.teamMembers} != null">
                                <div th:each="m,mStat : ${team.teamMembers}">
                                    <div class="table_form">
                                        <label>姓名</label>
                                        <input th:id="'memberName'+${mStat.count}" type="text" th:value="${m.memberName}" >
                                    </div>
                                    <div class="table_form">
                                        <label>手机号</label>
                                        <input th:id="'memberPhone'+${mStat.count}" type="text" th:value="${m.memberPhone}" >
                                    </div>
                                    <div class="table_form">
                                        <label>邮箱</label>
                                        <input th:id="'memberEmail'+${mStat.count}" type="text" th:value="${m.memberEmail}" >
                                    </div>
                                    <div class="table_form">
                                        <a href="#" class="btn btn-danger removeclass">删除成员</a>
                                    </div>
                                </div>
                            </div>
                            <div class="table_form" style="margin-top:30px;">
                                <a href="#" id="addGroup" class="btn btn-primary">添加成员</a>
                            </div>
                            <div class="table_form">
                                <label>&nbsp;</label>
                                <input  type="submit" class="btn btn-primary formBtn" value="提交" >
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="foo"></div>

    <!--====== RULE PART ENDS ======-->

    <!--====== Jquery js ======-->
    <script src="/js/jquery-1.12.4.min.js"></script>

    <!--====== Bootstrap js ======-->
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/jquery-validate.js"></script>
    <script src="/js/sweetalert.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/layer/layer.js"></script>
    <script type="text/javascript" th:inline="javascript">
        $(document).ready(function(){
            const planStyle = [[${team.plan}]];
            if(planStyle != null){
                if(planStyle.endsWith('doc') || planStyle.endsWith('docx') || planStyle.endsWith('pdf')){
                    $('#plan_file').show();
                    $('#plan').hide();
                }else if(planStyle.endsWith('mp4') || planStyle.endsWith('avi')){
                    $('#plan_video').show();
                    $('#plan').hide();
                }
            }

            const contentStyle = [[${team.video}]];
            if(contentStyle != null){
                if(contentStyle.endsWith('doc') || contentStyle.endsWith('docx') || contentStyle.endsWith('pdf')){
                    $('#content_file').show();
                    $('#content').hide();
                }else if(contentStyle.endsWith('mp4') || contentStyle.endsWith('avi')){
                    $('#content_video').show();
                    $('#content').hide();
                }
            }
            let groupCount = 0;
            const members = [[${team.teamMembers}]];
            if(members != null){
                groupCount = members.length;
            }
            $("body").on("click",".removeclass", function(e){
                $(this).parent().parent('div').remove();
                groupCount--;
                return false;
            });
            $('#coach').change(function(){
                if(this.checked){
                    $(this).attr('value', 1);
                }else{
                    $(this).attr('value', 0);
                }
            })
            $('#addGroup').click(function(){
                groupCount++;
                $('#groups').append('<div>' +
                    '<div class="table_form">' +
                    '   <label>姓名</label>' +
                    '   <input id="memberName'+groupCount+'" type="text" value="" >' +
                    '</div>' +
                    '<div class="table_form">' +
                    '   <label>手机号</label>' +
                    '   <input id="memberPhone'+groupCount+'" type="text" value="" >' +
                    '</div>' +
                    '<div class="table_form">' +
                    '   <label>邮箱</label>' +
                    '   <input id="memberEmail'+groupCount+'" type="text" value="" >' +
                    '</div>' +
                    '<div class="table_form">' +
                    '   <a href="#" class="btn btn-danger removeclass">删除成员</a>' +
                    '</div></div>');
            })
            $("#myForm").validate({
                rules: {
                    teamName: {
                        required: true
                    },
                    planUrl: {
                        required: true
                    }
                    // ,
                    // contentUrl: {
                    //     required: true
                    // }
                },
                messages: {
                    teamName: {
                        required: "请输入团队名称"
                    },
                    planUrl: {
                        required: "请上传项目计划书"
                    }
                    // ,
                    // contentUrl: {
                    //     required: "请上传项目介绍视频"
                    // }
                },
                submitHandler: function(form) {
                    const res = [];
                    for(let i=1;i<=groupCount;i++){
                        const res_long = {};
                        const memberName = $('#memberName'+i).val();
                        if(memberName == ''){
                            swal({
                                text: '第'+i+'个团队成员的姓名不能为空',
                                icon: 'error'
                            });
                            return;
                        }
                        const memberPhone = $('#memberPhone'+i).val();
                        if(memberPhone == ''){
                            swal({
                                text: '第'+i+'个团队成员的手机号不能为空',
                                icon: 'error'
                            });
                            return;
                        }
                        const memberEmail = $('#memberEmail'+i).val();
                        if(memberEmail == ''){
                            swal({
                                text: '第'+i+'个团队成员的邮箱不能为空',
                                icon: 'error'
                            });
                            return;
                        }
                        res_long['memberName'] = memberName;
                        res_long['memberPhone'] = memberPhone;
                        res_long['memberEmail'] = memberEmail;
                        res.push(res_long);
                    }
                    const formData = {
                        teamName: $('#teamName').val(),
                        coach: $('#coach').val(),
                        plan: $('#planUrl').val(),
                        content: $('#contentUrl').val(),
                        res: JSON.stringify(res)
                    };
                    $.ajax({
                        type: 'POST',
                        url: '/team',
                        data: formData,
                        dataType: 'json',
                        success: function(data) {
                            if(data.message!=null){
                                swal({
                                    text: data.message,
                                    icon: 'error'
                                });
                            }else{
                                swal({
                                    text: "操作成功",
                                    icon: 'success'
                                });
                                setTimeout(function(){
                                    window.location.href = "/teamUI";
                                }, 1000)
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.log('Error: ' + textStatus);
                        }
                    });
                }
            });
        })
        $('#plan').change(function(){
            if ($(this).val() != undefined && $(this).val() !== "") {
                verificationPicFile(this, 30, 1);
            }
        })
        $('#content').change(function(){
            if ($(this).val() != undefined && $(this).val() !== "") {
                verificationPicFile(this, 30, 2);
            }
        })
        function verificationPicFile(file, fileMaxSize, type){
            let fileSize = 0;
            const filePath = file.value;
            if(filePath){
                fileSize =file.files[0].size;
                const size = fileSize / 1024 /1024;
                if (size > fileMaxSize) {
                    alert("文件大小不能大于"+fileMaxSize+"MB！");
                    file.value = "";
                    return false;
                }else if (size <= 0) {
                    alert("文件大小不能为0M！");
                    file.value = "";
                    return false;
                }
                return upload(type);
            }else{
                return false;
            }
        }
        function upload(type){
            const formData = new FormData();
            if(type == 1){
                formData.append("file", $('#plan').prop('files')[0]);
            }else if(type == 2){
                formData.append("file", $('#content').prop('files')[0]);
            }
            let li = undefined;
            $.ajax({
                type: 'POST',
                url: '/upload',
                data: formData,
                contentType: false, // 不设置内容类型，因为使用了 FormData
                processData: false, // 不处理数据，因为使用了 FormData
                beforeSend: function () {
                    li = layer.load(0, {shade: [0.1, '#000']});
                },
                success: function(data) {
                    layer.close(li);
                    if(data.message!=null){
                        swal({
                            text: data.message,
                            icon: 'error'
                        });
                    }else{
                        if(type == 1){
                            $('#planUrl').attr('value', data.data);
                            if(data.data.endsWith('doc') || data.data.endsWith('docx') || data.data.endsWith('pdf')){
                                $('#plan_file').show();
                                $('#plan_video').hide();
                                $('#plan').hide();
                            }else if(data.data.endsWith('mp4') || data.data.endsWith('avi')){
                                $('#plan_video').show();
                                $('#plan_file').hide();
                                $('#plan').hide();
                            }
                        }
                        if(type == 2){
                            $('#contentUrl').attr('value', data.data);
                            if(data.data.endsWith('doc') || data.data.endsWith('docx') || data.data.endsWith('pdf')){
                                $('#content_video').hide();
                                $('#content_file').show();
                                $('#content').hide();
                            }else if(data.data.endsWith('mp4') || data.data.endsWith('avi')){
                                $('#content_file').hide();
                                $('#content_video').show();
                                $('#content').hide();
                            }
                        }

                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    layer.close(li);
                    console.log('Error: ' + textStatus);
                }
            });
        }
    </script>
</body>
</html>
